<template>
  <div class="box">
    <div class="el-driver">
      <el-form
        label-width="90px"
      >
        <el-row type="flex" justify="start">
          <el-col :span="8">
            <el-form-item label="司机账号:">
              <el-input v-model.trim="data.account" placeholder="请输入司机账号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机姓名">
              <el-input v-model.trim="data.name" placeholder="请输入司机姓名" />
            </el-form-item></el-col>
          <el-col :span="8">
            <el-form-item label="司机手机号">
              <el-input v-model.trim="data.phone" placeholder="请输入司机手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属机构">
              <el-select v-model="value" style="width:300px" placeholder="请选择所属机构">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="btnbox">
              <el-button type="primary" size="medium" style="height: 40px " @click="getData">搜索</el-button>
              <el-button size="medium" @click="reSetData">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!--司机数据 tableData -->
    <div class="el-driver2">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="70" align="center" />
        <el-table-column prop="account" label="司机账号" width="180" align="center" />
        <el-table-column prop="name" label="司机姓名" width="170" align="center" />
        <el-table-column prop="mobile" label="司机电话" width="180" align="center" />
        <el-table-column prop="truck.licensePlate" label="关联车辆" width="180" align="center" />
        <el-table-column prop="agency.name" label="所属机构" width="180" align="center" />
        <el-table-column prop="workStatus" label="工作状态" width="180" align="center">
          <template v-slot="{row}">
            <span>{{ row.workStatus===1? '上班':'休息' }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="140" align="center">

          <!-- 设置按钮 -->
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="goDetail(scope.row.userId)">查看</el-button>
            <el-button type="text" size="small" @click="pdEdit(scope.row, scope.$index)">配置车辆</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          :current-page="data.page"
          :page-size="data.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10,20,30,40]"
          :total="total"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 车辆配置弹窗 -->
    <el-dialog
      title="车辆配置"
      :visible.sync="showDialog"
      width="500px"
    >
      <div class="content">
        <span>配置车辆需求满足以下条件：</span>
      </div>
      <div class="driver-sj">
        <span class="span1">1 司机信息已完善</span>
        <span class="span2">2 司机已设置排班</span>
      </div>
      <div class="two">
        <span>3 司机绑定车辆在启用状态</span>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="btnOK">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 配置车辆弹窗 -->
    <el-dialog
      title="配置车辆"
      :visible.sync="isShow"
      width="700px"
      style="height:600px"
      class=""
    >
      <div class="info">
        <div class="info1">
          <span>司机编号:{{ userinfo.userId }}</span>
          <span>司机名称:{{ userinfo.name }}</span>
          <span>司机电话:{{ userinfo.mobile }}</span>
          <span>所属机构:{{ agency }}</span>
        </div>
        <el-form>
          <el-form-item label="配置车辆">
            <el-select v-model="singlecarid" style="width:300px" placeholder="请选择活动区域" @change="selectChange">
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.licensePlate"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <el-table
          border
          style="width: 100%"
          header-align="center"
          :data="editData"
        >
          <el-table-column label="车牌号" align="center">
            <template v-slot="{row}">
              <span>{{ row.licensePlate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="车辆状态" align="center">
            <template v-slot="{row}">
              <div class="column2">
                <div v-if="row.workStatus===1" class="work2" />
                <div v-else class="work3" />
                <span>{{ row.workStatus }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <div slot="footer" style="text-align: center;">
        <el-button type="primary" @click="btnOK2">确 定</el-button>
        <el-button @click="cancel2">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDriverList, getUnWorkingTrucks } from '@/api/Driver'
export default {
  name: 'Driver',
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      data: {
        page: 1,
        pageSize: 10,
        account: '',
        name: '',
        phone: ''
      },
      value: '',
      total: 0,
      editData: [],
      tableData: [], // 司机数据
      list: [], // 启用停用车辆数据
      showDialog: false, // 一级弹窗
      isShow: false, // 二级弹窗
      singlecarid: '',
      userinfo: {},
      agency: {}

    }
  },
  created() {
    this.getData()
    this.getUnWorkingTrucks()
  },
  mounted() {

  },
  methods: {
    async getData() {
      const res = await getDriverList(this.data)
      // 将司机数据渲染到列表中
      this.tableData = res.items
      // 分页
      this.data.page = res.page
      this.data.pageSize = res.pageSize
      this.total = +res.counts
    },
    // 重置表单
    reSetData() {
      this.data.account = ''
      this.data.agentId = ''
      this.data.name = ''
      this.data.phone = ''
      this.getData()
    },
    // 分页定义规则
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    handleSizeChange(val) {
      this.data.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.data.page = val
      this.getData()
    },

    // 查看司机详情跳转
    goDetail(id) {
      this.$router.push({
        path: '/dirverList',
        query: { id }
      })
    },

    // 配置车辆
    pdEdit(info, index) {
      this.showDialog = true
      this.userinfo = this.tableData.find(el => el.userId === info.userId)
      this.agency = this.userinfo.agency.name
      this.editData = [info.truck]
      this.singlecarid = this.editData[0].licensePlate
    },

    // 获取已经停用的车辆
    async getUnWorkingTrucks() {
      this.list = await getUnWorkingTrucks()
    },
    // 选择框变化
    selectChange(val) {
      this.editData = [this.list.find(el => {
        return el.id === val
      })]
    },

    // 关闭一级车辆配置
    cancel() {
      this.showDialog = false
    },
    // 跳二级配置车辆弹窗
    btnOK() {
      this.isShow = true
      this.showDialog = false
    },
    cancel2() {
      this.isShow = false
      this.editData = []
    },
    btnOK2() {
      this.isShow = false
      this.editData = []
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  overflow: hidden;
  margin: 0 auto;
  background-color: #f3f4f7;

}
.el-driver {
  padding: 20px 0 0 0;
  background-color: #fff;
  .el-form {
    .el-row {
      flex-wrap: wrap;
      .btnbox {
        padding-left: 60px;
        .el-button {
          width: 90px;
        }
      }
    }
    .el-form-item {
      padding: 0 30px;
      .el-form-item__label {
        color: #20232a !important;
      }
    }
  }
}
.el-driver2 {
  padding: 28px;
  margin-top: 20px;
  background-color: #ffffff;
  .el-table {
    padding: 0 30px;
  }
}

.content{
  padding-bottom: 18px;
}
.driver-sj{
  padding-bottom: 20px;
  .span1{
    padding-right: 80px;
  }
}

 .info1{
          padding-left: 40px;
          span{
            display:inline-block;
            width: 120px;
            margin-right: 140px;
            margin-left:  40px;
            margin-bottom: 30px;
            white-space: nowrap;
         }
       }
</style>
